<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的店铺</el-breadcrumb-item>
      <el-breadcrumb-item>店铺风格管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-tabs>
        <el-tab-pane label="我的模板">
          <div class="mytemplate">
            <my-templete
              :shopStyle="shopStyle"
              :myShopList="myShopList"
              :myPayList="myPayList"
              @userTemplate="userTemplate"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="模板商城">
          <div class="mytemplate">
            <templete-shop
              :shopStyle="shopStyle"
              :freeList="freeList"
              :payList="payList"
              @addMyList="addMyList"
              @buyTemplete="buyTemplete"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import '@/mock/lwbmock.js'
import { getItem, setItem } from '@/components/goods/utils/stroge.js'
import myTemplete from '@/components/store/shop-style/components/my-templete.vue'
import templeteShop from '@/components/store/shop-style/components/templete-shop.vue'
export default {
  name: '',
  components: {
    myTemplete,
    templeteShop
  },
  props: {},
  data () {
    return {
      shopStyle: [],
      myShopList: getItem('SHANGCHENGLIST') || [],
      myPayList: getItem('MYPAYLIST') || [],
      shopList: [],
      freeList: getItem('FREELIST') || [],
      payList: getItem('PAYLIST') || []
    }
  },
  computed: {},
  watch: {
  },
  created () {
    this.getTempleteStyle()
    if (getItem('FREELIST') && getItem('PAYLIST')) {
    } else {
      this.getTempleteList()
    }
  },
  mounted () {
  },
  methods: {
    async getTempleteStyle () {
      const { data } = await this.axios.get('/template/style')
      this.shopStyle = data.data
    },
    async getTempleteList () {
      const { data } = await this.axios.get('/template/list')
      this.shopList = data.list
      this.shopList.forEach(item => {
        item.template_id = item.template_id.toString()
      })
      this.freeList = this.shopList.filter(item => {
        return item.payment === 0
      })
      this.payList = this.shopList.filter(item => {
        return item.payment === 1
      })
      setItem('PAYLIST', this.payList)
      setItem('FREELIST', this.freeList)
    },
    addMyList (item) {
      const shopList = [...this.freeList, ...this.payList, ...this.myShopList, ...this.myPayList]
      shopList.forEach(temp => {
        temp.is_user = false
      })
      item.is_user = true
      // this.myShopList.includes(item) ? item.is_user = true : this.myShopList.push(item)
      if (this.myShopList.length === 0) {
        this.myShopList.push(item)
      }
      let flag = true
      this.myShopList.forEach(shop => {
        if (shop.template_id === item.template_id) {
          flag = false
          shop.is_user = true
          return false
        }
      })
      // console.log(flag)
      if (flag) {
        this.myShopList.push(item)
      } else {

      }
      setItem('PAYLIST', this.payList)
      setItem('MYPAYLIST', this.myPayList)
      setItem('FREELIST', this.freeList)
      setItem('SHANGCHENGLIST', this.myShopList)
    },
    async buyTemplete (item) {
      if (!item.is_buy) {
        const results = await this.$confirm('请确认购买', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).catch((err) => {
          return err
        })
        if (results === 'confirm') {
          const shopList = [...this.freeList, ...this.payList, ...this.myShopList, ...this.myPayList]
          shopList.forEach(temp => {
            temp.is_user = false
          })
          item.is_buy = true
          item.is_user = true
          // this.myPayList.includes(item) ? item.is_user = true : this.myPayList.push(item)
          if (this.myPayList.length === 0) {
            // console.log(1)
            this.myPayList.push(item)
          }
          let flag = true
          this.myPayList.forEach(pay => {
            if (pay.template_id === item.template_id) {
              pay.is_user = true
              flag = false
              return
            }
          })
          if (flag) {
            item.is_user = true
            this.myPayList.push(item)
          } else {

          }
        } else {
        }
      } else {
        const shopList = [...this.freeList, ...this.payList, ...this.myShopList, ...this.myPayList]
        shopList.forEach(temp => {
          temp.is_user = false
        })
        item.is_user = true
        if (this.myPayList.length === 0) {
          console.log(1)
          this.myPayList.push(item)
        }
        let flag = true
        this.myPayList.forEach(pay => {
          if (pay.template_id === item.template_id) {
            pay.is_user = true
            flag = false
            return
          }
        })
        if (flag) {
          item.is_user = true
          this.myPayList.push(item)
        } else {

        }
      }
      setItem('PAYLIST', this.payList)
      setItem('MYPAYLIST', this.myPayList)
      setItem('FREELIST', this.freeList)
      setItem('SHANGCHENGLIST', this.myShopList)
    },
    userTemplate (item) {
      const shopList = [...this.freeList, ...this.payList, ...this.myShopList, ...this.myPayList]
      shopList.forEach(temp => {
        temp.is_user = false
      })
      item.is_user = true
      this.freeList.forEach(free => {
        free.is_user = false
        if (free.template_id === item.template_id) {
          free.is_user = true
        }
      })
      this.payList.forEach(free => {
        free.is_user = false
        if (free.template_id === item.template_id) {
          free.is_user = true
        }
      })
      setItem('PAYLIST', this.payList)
      setItem('MYPAYLIST', this.myPayList)
      setItem('FREELIST', this.freeList)
      setItem('SHANGCHENGLIST', this.myShopList)
    }
  }
}
</script>

<style scoped lang="less">
.mytemplate {
  border: 1px solid #ccc;
  padding: 20px;
}
.el-card {
  padding: 20px 0 0 40px;
}
/deep/.el-tabs__item {
  width: 150px;
  border: 1px solid pink;
  padding: 0;
  text-align: center;
  color: #000;
}
/deep/.el-input__inner {
  width: 148px;
}
/deep/.el-tabs__item.is-active {
  color: #fff;
  background-color: skyblue;
}
.el-tabs__item:hover {
  color: #fff;
}
.current {
  color: green !important;
}
/deep/.el-tabs__nav-wrap::after {
  display: none;
}
/deep/.el-tabs__active-bar {
  display: none;
}
i.shu {
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: #333;
  margin-top: 20px;
  margin-right: 10px;
}
img {
  width: 100%;
  height: 100%;
}
.free,
.buyed {
  .free-list {
    display: flex;
    padding: 20px 30px;
    flex-wrap: wrap;
    /deep/.free-item {
      width: 160px;
      text-align: center;
      margin-right: 100px;
      > p {
        font-size: 16px;
      }
      p.user-temp {
        color: skyblue;
        cursor: pointer;
      }
    }
  }
}
.free-item:nth-child(4n) {
  margin-right: 0 !important;
}
.free-item-photo {
  width: 165px;
  height: 260px;
  border: 15px solid #ccc;
  padding: 5px;
}
</style>
